/**
 *@author：yanghx
 *@Date: 2020/2/15 12:11
 */
import React from 'react';
import {ScrollView, StyleSheet, View, Text} from 'react-native';
// 现在PropTypes不在react中
import PropTypes from 'prop-types';
import {
  List,
  Radio,
  InputItem,
  DatePicker,
  Provider,
  Picker,
  TextareaItem,
  Button,
  WingBlank,
  WhiteSpace,
} from '@ant-design/react-native';
import {TypeEnum, FaultSymptomsSelectData} from '@page/repair/RepairConstant';

const Item = List.Item;
const Brief = Item.Brief;
const RadioItem = Radio.RadioItem;

export default class RepairPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      form_values: {
        // 报修类型、1 车辆保养。2 常规维修
        type: null,
        //预约维修时间，传时间戳
        appointmentTime: null,
        //车辆牌照
        licensePlate: null,
        //行驶证 图片
        driverLicenseImg: null,
        //联系人名称
        contactPerson: null,
        //联系人电话
        contactPhone: null,
        //联系人地址
        contactAddress: null,
        //故障症状
        faultSymptoms: null,
        //故障描述
        faultDesc: null,
        //故障语音描述
        faultDescVoice: null,
        //故障图片  可以传多个
        faultImg: [],
      },
    };
  }

  static propTypes = {test: PropTypes.string};
  static navigationOptions = {
    title: '云创空间一键报修',
  };

  /**
   * 故障症状选择
   */
  onFaultSymptomsChange = value => {
    this.setState({faultSymptoms: value});
  };

  render() {
    return (
      <Provider>
        <ScrollView
          style={{flex: 1, backgroundColor: '#f5f5f9'}}
          automaticallyAdjustContentInsets={false}
          showsHorizontalScrollIndicator={false}
          showsVerticalScrollIndicator={false}>
          <List renderHeader={'报修信息'}>
            <WingBlank>
              <Item data-seed="wrap">报修类型*</Item>
              <RadioItem
                style={{paddingLeft: 50}}
                checked={this.state.type === TypeEnum.carCare.code}
                onChange={event => {
                  if (event.target.checked) {
                    this.setState({type: TypeEnum.carCare.code});
                  }
                }}>
                {TypeEnum.carCare.desc}
              </RadioItem>
              <RadioItem
                style={{paddingLeft: 50}}
                checked={this.state.type === TypeEnum.routineMaintenance.code}
                onChange={event => {
                  if (event.target.checked) {
                    this.setState({type: TypeEnum.routineMaintenance.code});
                  }
                }}>
                {TypeEnum.routineMaintenance.desc}
              </RadioItem>
              <DatePicker
                value={this.state.appointmentTime}
                mode="datetime"
                defaultDate={new Date()}
                minDate={new Date()}
                maxDate={new Date(2026, 11, 3)}
                onChange={value => {
                  this.setState({appointmentTime: value});
                }}
                format="YYYY-MM-DD HH:mm">
                <Item arrow="horizontal">预约维修</Item>
              </DatePicker>
              <Item>行驶证 站位 todo </Item>
              <InputItem
                clear
                labelNumber={5}
                value={this.state.contactPerson}
                onChange={value => {
                  this.setState({
                    contactPerson: value,
                  });
                }}
                placeholder="联系人">
                联系人*
              </InputItem>
              <InputItem
                clear
                type={'phone'}
                labelNumber={5}
                value={this.state.contactPhone}
                onChange={value => {
                  this.setState({
                    contactPhone: value,
                  });
                }}
                placeholder="联系人电话">
                联系电话*
              </InputItem>

              <InputItem
                clear
                labelNumber={5}
                value={this.state.contactAddress}
                onChange={value => {
                  this.setState({
                    contactAddress: value,
                  });
                }}
                placeholder="联系地址">
                联系地址*
              </InputItem>
              <Picker
                data={FaultSymptomsSelectData}
                cols={1}
                value={this.state.faultSymptoms}
                onChange={this.onFaultSymptomsChange}>
                <Item arrow="horizontal">故障症状*</Item>
              </Picker>
              <Item data-seed="wrap">故障描述*</Item>
              <TextareaItem
                style={{paddingLeft: 50}}
                rows={4}
                placeholder="请输入故障描述"
                count={500}
                onChange={value => {
                  this.setState({faultDesc: value});
                }}
              />
              <Item>故障语音描述 站位 todo </Item>
              <Item>故障图片 站位 todo </Item>

              <WhiteSpace size={'xl'}/>
              <Button type="primary">提交</Button>
              <WhiteSpace size={'xl'}/>
            </WingBlank>
          </List>
        </ScrollView>
      </Provider>
    );
  }
}

const styles = StyleSheet.create({});
